<template>
  <div>
    <div id="main">
      <div id="login">
        <div id="login-left">
          <img src="../../img/u405.png" width="280px" alt="" />
        </div>
        <div id="login-right">
          <p class="top">
            <span class="dl">登录</span>
          </p>
          <p class="second">
            <span class="wz">FIT运动后台管理系统</span>
          </p>
          <div class="input-1 input">
            <input type="text" placeholder="请输入账号" />
          </div>

          <div class="input-2 input">
            <input type="text" placeholder="请输入密码" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
#main {
  height: 100vh;
  background-color: rgba(57, 186, 232);
  position: relative;

  #login {
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 800px;
    height: 500px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    position: absolute;
    left: 28%;
    top: 25%;
    display: flex;

    #login-left {
      background-color: lightcoral;
      border-radius: 8px;
      width: 50%;
      height: 100%;
      position: relative;

      img {
        position: absolute;
        top: 18%;
        left: 15%;
      }
    }

    #login-right {
      border-radius: 8px;
      background-color: lightblue;
      height: 100%;
      width: 50%;

      .top {
        margin-top: 75px;

        .dl {
          font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 36px;
        }
      }

      .second {
        margin-top: 5px;
        .wz {
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
          letter-spacing: normal;
          color: #333333;
        }
      }

      .input {
        width: 300px;
        height: 40px;
        padding: 2px 2px 2px 45px;
        font-family: "Arial Normal", "Arial", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
       
      }
      .input-1 {
        margin-top: 30px;
      }

      .input-2 {
        margin-top: 15px;
      }
    }
  }
}
</style>
